<template>
  <div class="diagram-sidebar">
    <div>
      <h1 class="node-category-title">基本事件与中间事件</h1>
      <div class="node-category">
        <div class="node-item" @mousedown="dragInNode('pro-circle')">
          <icon-circle class="svg-node" />
        </div>
        <div class="node-item" @mousedown="dragInNode('pro-rect')">
          <icon-rect class="svg-node"/>
        </div>  
      </div>
    </div>
    <div>
      <h1 class="node-category-title">逻辑门</h1>
      <div class="image-node image-or" @mousedown="dragInNode('image-or')">
      </div>
      <div class="image-node image-and" @mousedown="dragInNode('image-and')">
      </div>
    </div>
  </div>
</template>

<script>
import IconCircle from './icon/Circle.vue'
import IconRect from './icon/Rect.vue'


export default {
  name: 'DiagramSidebar',
  methods: {
    dragInNode (type) {
      this.$emit('dragInNode', type)
    }
  },
  components: {
    IconCircle,
    IconRect,
  }
}
</script>

<style scoped>
.diagram-sidebar {
  height:800px;
  user-select: none;
}
.node-category-title {
  margin: 0;
  font-size: 14px;
  display: block;
  border-bottom: 1px solid #e5e5e5;
  line-height: 60px;
  margin-bottom: 10px;
}
.node-item {
  width: 35px;
  height: 35px;
  margin-right: 5px;
  display: inline-block;
}
.node-category {
  border-bottom: 1px solid #e5e5e5;
}
.svg-node {
  left: 1px;
  top: 1px;
  width: 32px;
  height: 30px;
  display: block;
  position: relative;
  overflow: hidden;
}
.image-node, .icon-node {
  display: inline-block;
  width: 30px;
  height: 55px;
  margin: 10px;
  cursor: pointer;
}
.image-or {
  width:40px;
  background: url('/api/uploads/file/or.png');
  background-size: cover;
}
.image-and {
  width: 40px;
  background: url('/api/uploads/file/and.png');
  background-size: cover;
}


</style>
